<template lang="pug">
  div(id="main" style="width: 600px;height:400px;")
</template>
<script lang="ts">
import { Component, Vue} from 'vue-property-decorator';

// eslint-disable-next-line @typescript-eslint/no-var-requires
const echarts = require('echarts');
@Component
export default class Welcome extends  Vue {

  public mounted() {
    const myChart = echarts.init(document.getElementById('main'));
    myChart.setOption( {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(220, 220, 220, 0.8)'
        }
      }]
    })
  }

}
</script>

<style lang="stylus">

</style>
